<template>
	<view>
		<header-bar :title=titleName>
			<uni-icons type="undo" size="23" slot="back"></uni-icons>
		</header-bar>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 210px;" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
		</view>
		<!-- 物流区 -->
		<view class="con1 flex-row">
			<view>
				<image src="/static/my-icons/order_icon5.png" class="order_icon"></image>
			</view>
			<view class="w_text">
				<view class="item">订单编号：{{expresslist.order_no}}</view>
				<view class="item">物流公司：{{expresslist.de_company}}</view>
				<view class="item">物流单号：{{expresslist.wuliu_no}}</view>
			</view>
		</view>
		<view class="con4" :wx:if="expresslist.list.length>0">
			<view class="con4_top1">物流信息</view>
			<!-- 物流列表 -->
			<view class="con4_top3 flex" :wx:for="expresslist.list">
				<view class="con4_text" wx:key="key" wx:for-item='item'>
					<text class="con4_time index==0?'':'no'">{{item.status}} {{item.time}}</text>
					<view class="line_ellipsis text ">{{item.text}}</view>

					<view class="con4_icon">
						<image :wx:if="item.display==0"
							:src="item.status==1?'/static/my-icons/w_icon4.png':'/static/my-icons/wuliu_icon2.png'"
							class="chek_img"></image>
						<image :wx:if="item.display==1"
							:src="item.status==1?'/static/my-icons/wuliu_icon3.png':'/static/my-icons/w_icon3.png'"
							class="chek_img"></image>
						<image :wx:if="item.display==2"
							:src="item.status==1?'/static/my-icons/wuliu_icon4.png':'/static/my-icons/w_icon2.png'"
							class="chek_img"></image>
						<image :wx:if="item.display==3"
							:src="item.status==1?'/static/my-icons/wuliu_icon5.png':'/static/my-icons/w_icon1.png'"
							class="chek_img"></image>
						<view class="line" :wx:if="index!=0"></view> <!-- 当第二个开始有一条物流的横线 -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleName:"物流详情",
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
				}, {
					latitude: 39.90,
					longitude: 116.39,
				}],
				//物流情况
				expresslist: {
					order_no: '1q213232132',
					de_company: '顺丰',
					wuliu_no: '73584y357349',
					list: [{
							status: 0, //状态完成
							display: '0', //已签收 
							status_name: '已签收',
							text: '【揭阳市】已离开 广东揭阳分拨中心：发往啦啦啦啦说的话凤凰大：发往啦啦啦啦说的话凤凰大啦啦说的话凤凰大厦附近收到回复的就是',
							time: '2022-05-21 18:33:42'
						},
						{
							status: 0, //
							display: '1',
							status_name: '待取件',
							text: '【揭阳市】已离开 广东揭阳分拨中心：发往啦啦啦啦说的话凤凰大厦附近收到回复的就是',
							time: '2022-05-21 9:33:42'
						},
						{
							status: 0, //状态完成
							display: '2',
							status_name: '派送中',
							text: '【揭阳市】已离开 广东揭阳分拨中心：发往啦啦啦啦说的话凤凰大厦附近收到回复的就是',
							time: '2022-05-20 13:33:42'
						},
						{
							display: '3',
							status: 0, //状态完成
							status_name: '运输中',
							text: '【揭阳市】已离开 广东揭阳分拨中心：发往啦啦啦啦说的话凤凰大厦附近收到回复的就是',
							time: '2022-05-19 18:33:42'
						}, {
							display: '3',
							status: 0, //状态完成
							status_name: '运输中',
							text: '【揭阳市】已离开 广东揭阳分拨中心：发往啦啦啦啦说的话凤凰大厦附近收到回复的就是',
							time: '2022-05-18 18:33:42'
						}, {
							display: '3',
							status: 0, //状态完成
							status_name: '运输中',
							text: '【揭阳市】已离开 广东揭阳分拨中心：发往啦啦啦啦说的话凤凰大厦附近收到回复的就是',
							time: '2022-05-15 18:33:42'
						}
					]
				}
			}
		},
	}
</script>

<style>
	.con1 {
		width: 700rpx;
		background: #682074;
		box-shadow: 0px 5rpx 18rpx 3rpx rgba(176, 176, 176, 0.06);
		border-radius: 20rpx;
		margin: 40rpx 25rpx;
		padding: 26rpx 25rpx;
		box-sizing: border-box;
		display: flex;
	}

	.order_icon {
		margin-left: 20rpx;
		margin-top: 10rpx;
		width: 150rpx;
		height: 120rpx;
	}

	.w_text {
		margin-left: 50rpx;
		color: #fff;
		font-size: 25rpx;
	}

	.item {
		margin-bottom: 20rpx;
	}

	.item:last-child {
		margin-bottom: 0;
	}

	.con4 {
		width: 700rpx;
		background: #FFFFFF;
		box-shadow: 0px 5rpx 18rpx 3rpx rgba(176, 176, 176, 0.06);
		border-radius: 20rpx;
		margin: 40rpx 25rpx;
		padding: 26rpx 25rpx 56rpx;
		box-sizing: border-box;
	}

	.con4_top1 {
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		margin-bottom: 35rpx;
	}

	.con4_top2 {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 42rpx;
	}

	.con4_img {
		width: 25rpx;
		height: 28rpx;
	}

	.chek_img {
		width: 52rpx;
		height: 52rpx;
	}

	.con4_top3 {
		margin-bottom: 53rpx;
		position: relative;
	}

	.con4_top3:last-child {
		margin-bottom: 0
	}

	.con4_icon {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
	}

	.con4_text {
		font-size: 22rpx;
		font-weight: 400;
		color: #666666;
		/* border-left: 2rpx solid #c9c9c9; */
		padding-left: 51rpx;
		margin-left: 23rpx
	}

	.con4_time {
		font-size: 28rpx;
		font-weight: 500;
		color: #682074;
	}

	.con4_icon1 {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
	}

	.line {
		width: 2rpx;
		height: 95rpx;
		background: #999999;
		position: absolute;
		top: -93rpx;
		left: 25rpx;
	}

	.text {
		font-size: 22rpx;
		font-weight: 400;
		color: #666666;
	}

	.no {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
	}
</style>
